<template>	
	<view>
		<!-- 搜索组件 -->
		<search  @toSearch="toSearchPage" disabled=false></search>
		<!-- 轮播图 -->
		<swiper class="swiper" autoplay="true" circular="true" interval="3000" duration="1000" indicator-dots="true">
			<navigator  
					v-for="(item,index) in swiperList" 
					:key="item.goods_id"  
					class="swiper-item" 
					:url=" '/subpkg/goods_detail/goods_detail?cId=' + item.goods_id " >
				<swiper-item  >
							<image :src="item.image_src"></image>
				</swiper-item>
			</navigator>
		</swiper>
		<!-- 导航栏 -->
		<view class="nav">
			<view 
					class="nav-item" 
					v-for="item in navList" 
					:key="item.image_src">
				<image :src="item.image_src" @click="navClickHandler(item.name)"></image>
			</view>
		</view>
		<!-- 楼层数据渲染 -->
		<view class="floor" v-for="(item,index) in floorList" :key="index">
			<!-- 标题图片 -->
			<image class="title-image" :src="item.floor_title.image_src" mode=""></image>
						<view class="floor-bottem">
								<view class="floor-left">
									<navigator hover-class="none" :url=" '/subpkg/goods_list/goods_list?query=' + item.product_list[0].name">
										<image  :src="item.product_list[0].image_src" mode=""></image>
									</navigator>
								</view>
							<view class="floor-right">
								<navigator  hover-class="none" v-for="(item,index) in item.product_list2"   :key="index" :url=" '/subpkg/goods_list/goods_list?query=' + item.name">
									<image :src="item.image_src" mode=""></image>
								</navigator>
							</view>
						</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabber-badge.js'
	export default {
		mixins:[badgeMix],
		data() {
			return { 
				swiperList:[],
				navList:[],
				floorList:[]
				}
		},
		onLoad(){
			this.getSwiperList()
			this.getNavList()
			this.getFloorList()
		},
		methods:{
			/**
			 * 	跳转搜索页
			 */
			toSearchPage(disabled){
				if(disabled){
					uni.navigateTo({ url:'/subpkg/search/search' })
				}
			},
			/**
			 * 获取轮播图数据
			 */
			async getSwiperList(){
				const { data:res } = await uni.$http.get('/api/public/v1/home/swiperdata')
				if(res.meta.status !== 200) return uni.$showMsg()
				this.swiperList = res.message
			},
			/**
			 * 获取导航栏数据
			 */
			async getNavList(){
				const { data:res } = await uni.$http.get('/api/public/v1/home/catitems')
				if(res.meta.status !== 200) return uni.$showMsg()
				this.navList = res.message
			},
			/**
			 * 获取楼层数据
			 */
			async getFloorList(){
				const { data:res } = await uni.$http.get('/api/public/v1/home/floordata')
				if(res.meta.status !== 200) return uni.$showMsg()
				this.floorList = res.message
				this.twoFloorList = JSON.parse(JSON.stringify(this.floorList)) 
				for(let i=0;i<this.twoFloorList.length;i++){
					delete this.twoFloorList[i].floor_title
					this.twoFloorList[i].product_list.shift()
				}
				for(let i=0;i<this.floorList.length;i++){
						this.floorList[i].product_list2 = this.twoFloorList[i].product_list
				}
			},
			/**
			 * 如果是分类就跳转到tabber 的分类页面
			 * @param {Object} name 每个导航的标题
			 */
			navClickHandler(name){
					if(name === '分类'){
						uni.switchTab({ url:'/pages/cate/cate' })
					}else{
						uni.navigateTo({ url:'/subpkg/goods_list/goods_list?cId=' + name })
					}
			}
		}
	}
</script>

<style lang="scss">
	.swiper{
		height: 330rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}

.nav{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	.nav-item{
		margin-bottom: 16rpx;
		image{
				width: 120rpx;
				height: 120rpx;
		}
	}
}

.floor{
			margin-left: 20rpx;
			.title-image{
				// width: 700rpx;
				width: 100%;
				height: 60rpx;
			}
			.floor-bottem{
				margin-bottom: 20rpx;
				display: flex;
				.floor-left{
					margin-right: 8rpx;
					image{
						width: 240rpx;
						height: 452rpx;
					}
				}
				.floor-right{
					display: flex;
					image{
						width: 220rpx;
						height: 220rpx;
						margin-left: 13rpx;
						margin-bottom: 13rpx;
					}
					flex-frow: 1;
					display: flex;
					flex-wrap: wrap;
				}
			}
}

</style>
